<template>
	<view id="detail" class="detail">
		<view class="header">
			<view class="line"></view>
			<view class="title">服务详情</view>
		</view>
		<view class="maps">
			<rich-text :nodes="repairRichText(richText)"></rich-text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { repairRichText } from '@/utils';
	
	defineProps({
		richText: {
			type: String,
			default: '',
		},
	});
</script>

<style lang="scss" scoped>
	.detail {
		.header {
			width: 100%;
			height: 60rpx;
			background: #EEEEEE;
			position: relative;
			.line {
				width: 326rpx;
				height: 2rpx;
				background: #D8D8D8;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
			.title {
				width: 188rpx;
				line-height: 60rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #242424;
				text-align: center;
				margin: auto;
				background-color: #EEEEEE;
				position: relative;
			}
		}
		.maps {
			.image {
				width: 100%;
				display: block;
			}
		}
	}
</style>